<template>
    <div class="box button-group">
        <button
        :disabled="leftButtonDisabled"
        @click="leftButtonClick"
        >&lt;</button>
        <button
        :disabled="rightButtonDisabled"
        @click="rightButtonClick"
        >&gt;</button>
      </div>
</template>
<script setup>
const props = defineProps({
  leftButtonDisabled: {
    type: Boolean,
    default: true
  },
  rightButtonDisabled: {
    type: Boolean,
    default: true
  }
})
const emit = defineEmits(['leftButtonClick', 'rightButtonClick'])
const leftButtonClick = () => emit('leftButtonClick')
const rightButtonClick = () => emit('rightButtonClick')
</script>
<style lang="scss" scoped>
.button-group{
    display: flex;
    justify-content: center;
    align-items: center;
    border-left:1px solid #ddd;
    border-right:1px solid #ddd;
    button{
      width: 38px;
      height: 38px;
      border: none;
      outline: none;
      border-radius: 5px;
      background-color: orange;
      color: #fff;
      &:disabled{
        opacity: .6;
      }
      &:nth-child(2){
        margin-left:10px;
      }
      &:hover{
        cursor: pointer;
      }
    }
  }
</style>